<template>
	<view>
		<tabs :current="active" @change="changeShow" :is-scroll="true" style="text-align: center;">
			<tab name="积分"></tab>
			<tab name="实物"></tab>
		</tabs>
		<mescroll-uni ref="mescrollRef" top="80rpx" @init="mescrollInit" @down="downCallback" @up="upCallback"
		:down="downOption" :up="upOption" v-if="type==3">
		<view class="order-list">
			<view v-for="(item, index) in orderList" :key="index" class="order-item bg-white m-t-20" @click="toDetail(item)">
					<view class="order-header flex row-between">
						<view class="flex">
							<view class="m-r-10">
								{{ item.draw_time }}
							</view>
						</view>
						<view class="primary" v-if="item.unOrder">
							待提交
						</view>
						<view class="primary" v-else>
							{{ item.findOrder.order_status_name }}
						</view>
					</view>
					<view class="order-con">
						<view class="order-goods flex">
							<u-image :src="item.findOrder.image" border-radius="10" width="160" height="160"></u-image>
							<view class="goods-info flex-1 m-l-20">
								<view class="goods-name line-2">{{ item.findOrder.order_name }}</view>
								<view class="flex row-between">
									<view class="goods-price primary m-t-10">
										
									</view>
									<view class="lighter">×1</view>
								</view>
							</view>
						</view>
					</view>
			</view>
		</view>
		<!-- <order-dialog ref="orderDialog" :order-id="orderId" :type="type" @confirm="confirmDialog"></order-dialog> -->
	</mescroll-uni>
	<mescroll-body ref="mescrollRef" :up="{
		  	noMoreSize: 10,
		  	empty: {
		  		icon: '/static/image/order_null.png',
		  		tip: '暂无数据~',
		  		fixed: false
		  	}
		  }" @init="mescrollInit" @down="downCallback" @up="upCallback" v-if="type==1">
			<view class="integral-lists">
				<view class="item flex row-between bg-white" v-for="(item, index) in orderList" :key="index">
					<view class="">
						<view class="nr">
							抽奖获得积分
						</view>
						<view class="xs muted m-t-10">
							{{item.draw_time}}
						</view>
					</view>
					<view :class="'lg primary '">
						{{item.integral}}
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item";
	import {
		drawWin
	} from "@/api/store";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		components: { },
		data() {
			return{
				type:1,
				active:0,
				orderList:[],
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: '/static/image/order_null.png',
						tip: '暂无数据~', // 提示
						fixed: true
					}
				},
			}
		},

		onLoad: function(options) {
			
		},

		methods: {
			toDetail(data){
				if(data.unOrder){
					data.goodsOrder.oid=data.id
					uni.navigateTo({
			    		url:'/bundle/pages/integral_settlement/integral_settlement_prize?obj='+JSON.stringify(data.goodsOrder)
			    	})
				}else{
					uni.navigateTo({
						url:'/bundle_b/pages/lucky_wheel/lucky_prize_detail?obj='+JSON.stringify(data)
					})
				}
				
			},
			changeShow(e){
				if(e==0){
					this.type=1
					this.downCallback() 
				}else if(e==1){
					this.type=3
					this.downCallback() 
				}

			},
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let {
					orderType,
				} = this;
				drawWin({
					page_size: pageSize,
					page_no: pageNum,
					type: this.type
				}).then(({
					data
				}) => {
					let curPageData = data.goods.lists;
					let curPageLen = curPageData.length;
					let hasNext = !!data.more;
					if (page.num == 1) this.orderList = [];
					this.orderList = this.orderList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				})
			},
		}
	};
</script>
<style lang="scss">
	.order-list {
		padding: 0 20rpx;
		overflow: hidden;

		.order-item {
			border-radius: 10rpx;

			.order-header {
				height: 80rpx;
				padding: 0 24rpx;
				border-bottom: 1px dotted #E5E5E5;
			}
			.order-goods {
				padding: 30rpx 24rpx;
				.goods-name {
					line-height: 40rpx;
					height: 80rpx;
				}
			}
			.all-price {
				text-align: right;
				padding: 0 24rpx 20rpx;
			}

			.order-footer {
				height: 100rpx;
				border-top: $-solid-border;
				padding: 0 24rpx;

				.plain {
					border: 1px solid #BBBBBB;

					&.red {
						border-color: $-color-primary;
					}

				}
			}
		}
	}
	.integral-lists {
		padding-top: 20rpx;
		.item {
			padding: 18rpx 30rpx;
			position: relative;
			&:not(:last-of-type) {
				border-bottom: $-solid-border;
			}
		}
	}
</style>
